<template>
	<div class="flex-wrap-column">
		<CustomTabs :tabList="tabList" v-model:tabActive="tabActive">
			<template #center>
				<CustomSearchInput placeholder="搜索商机/项目/客户/供应商/标书" />
			</template>
		</CustomTabs>
		<CustomGmSearch
			:col="columnsList"
			:tableData="tableData"
			:formList="formList"
			v-model:formData="formData"
			:controlList="controlList"
		>
		</CustomGmSearch>
	</div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import CustomTabs from '@/components/customTabs/index.vue'
import CustomGmSearch from '@/components/customGmSearch/index.vue'
import CustomSearchInput from '@/components/customSearchInput/index.vue'

const tabList = [
	{
		label: '审批记录',
		id: 1,
	},
	{
		label: '跟进记录',
		id: 2,
	},
]
const tabActive = ref(1)
const columns = computed(() => {
	return columnsList[tabActive.value - 1]
})
const formData = reactive({
	depart: '',
})
const formList = computed(() => {
	return tabActive.value === 2
		? [
				{
					type: 'select',
					props: 'depart',
					set: {
						placeholder: '请选择部门',
					},
					options: [
						{
							value: '',
							label: '全部部门',
						},
					],
				},
		  ]
		: [
				{
					type: 'select',
					props: 'depart',
					set: {
						placeholder: '请选择天数',
					},
					options: [
						{
							value: '',
							label: '最近30天',
						},
						{
							value: '1',
							label: '最近7天',
						},
						{
							value: '2',
							label: '最近天1',
						},
					],
				},

				{
					type: 'select',
					props: 'depart',
					set: {
						placeholder: '请选择审批',
					},
					options: [
						{
							value: '',
							label: '待审批',
						},
						{
							value: '1',
							label: '已审批',
						},
					],
				},
		  ]
})
const controlList = [
	{
		icon: 'menu',
	},
	{
		icon: 'deliver',
	},
	{
		icon: 'transform',
	},
]
const columnsList = [
	{ prop: 'name', label: '名称', width: 200, type: 'link', align: 'left' },
	{ prop: 'state', label: '部门负责人' },
	{ prop: 'approvalType', label: '审批类型' },
	{ prop: 'belong', label: '归属' },
	{ prop: 'sendPerson', label: '提交人' },
	{ prop: 'approvalPerson', label: '上级审批人' },
	{ prop: 'update', label: '更新时间' },
]

const tableData = [
	{
		name: '物料采购计划',
		state: '待审批',
		approvalType: '预算申请',
		belong: '商机',
		sendPerson: '李江',
		approvalPerson: '王志伟',
		update: '2025-05-08 12:00',
	},
	{
		name: '全季酒店建筑墙项目合同',
		state: '待审批',
		approvalType: '合同录入',
		belong: '合同',
		sendPerson: '李船长',
		approvalPerson: '王志伟',
		update: '2025-05-08 12:00',
	},
	{
		name: '理想汽车新能源充电桩（嘉兴区）',
		state: '待审批',
		approvalType: '结算单申请',
		belong: '项目',
		sendPerson: '王政',
		approvalPerson: '王志伟',
		update: '2025-05-08 12:00',
	},
]
</script>

<style scoped lang="less">
// .hint {
// 	height: 40px;
// 	background: rgba(0, 109, 122, 0.05);
// 	border-radius: 10px 10px 10px 10px;
// 	border: 1px solid #006d7a;
// 	margin-bottom: 23px;
// 	display: flex;
// 	align-items: center;
// 	padding: 0 18px;
// 	justify-content: space-between;
// 	.hint-left {
// 		display: flex;
// 		align-items: center;
// 		> img {
// 			width: 20px;
// 			height: 22px;
// 			margin-right: 14px;
// 		}
// 		p {
// 			font-weight: 400;
// 			font-size: 14px;
// 			color: #000000;
// 		}
// 	}
// 	.hint-right {
// 		display: flex;
// 		align-items: center;
// 		font-size: 18px;
// 		cursor: pointer;
// 	}
// }
</style>
